<template>
    <div class="chat-container">
        <div class="hd">
            <i class="ai-icon">🤖</i>
            deepseek 智能助手
        </div>

        <div class="bd" ref="chatContainer">
            <div class="bot answer animate-in">
                <div class="avatar">AI</div>
                <div class="message">
                    <div class="name">AI 助手</div>
                    <div class="content">您好！我是您的 AI 智能助手。您可以将您想要配置公路车的预算以及要求告诉我。</div>
                </div>
            </div>

            <div class="chat" v-for="(item, index) in conversation" :key="index">
                <div class="user question animate-in" v-if="item.role === 'user'">
                    <div class="message">
                        <div class="name">我</div>
                        <div class="content">{{ item.content }}</div>
                    </div>
                    <div class="avatar">ME</div>
                </div>
                <div class="bot answer animate-in" v-if="item.role === 'assistant'">
                    <div class="avatar">AI</div>
                    <div class="message">
                        <div class="name">AI 助手</div>
                        <div class="content" v-html="item.content"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ft">
            <div class="input-container">
                <input 
                    type="text" 
                    placeholder="请输入您的问题..." 
                    v-model="question"
                    @keyup.enter="send"
                >
                <button @click="send" :disabled="!question.trim()">
                    <span>发送</span>
                    <i class="send-icon">➤</i>
                </button>
            </div>
        </div>
    </div>
</template>

<style lang="css" scoped>
.chat-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f5f7fa;
}

.hd {
    height: 60px;
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    line-height: 60px;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.ai-icon {
    font-size: 24px;
    margin-right: 10px;
}

.bd {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.chat {
    margin-bottom: 20px;
}

.bot, .user {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 12px;
}

.user {
    flex-direction: row-reverse;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.bot .avatar {
    background: #e8f0fe;
    color: #1a73e8;
}

.user .avatar {
    background: #8E6FF7;
    color: white;
}

.message {
    max-width: 70%;
}

.name {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.content {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.bot .content {
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.user .content {
    background: #8E6FF7;
    color: white;
}

.ft {
    padding: 20px;
    background: #fff;
    border-top: 1px solid #eaeaea;
}

.input-container {
    display: flex;
    gap: 10px;
    max-width: 900px;
    margin: 0 auto;
}

input {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid #eaeaea;
    border-radius: 24px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #f5f7fa;
}

input:focus {
    outline: none;
    border-color: #8E6FF7;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(142,111,247,0.1);
}

button {
    padding: 0 24px;
    height: 42px;
    border: none;
    border-radius: 21px;
    background: #8E6FF7;
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

button:hover {
    background: #7857d8;
    transform: translateY(-1px);
}

button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.send-icon {
    font-size: 12px;
}

.animate-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 自定义滚动条样式 */
.bd::-webkit-scrollbar {
    width: 6px;
}

.bd::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.bd::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.bd::-webkit-scrollbar-thumb:hover {
    background: #999;
}
</style>

<script setup>
import { ref, nextTick, watch } from 'vue'
import axios from 'axios'

const conversation = ref([])
const question = ref("")
const chatContainer = ref(null)

// 自动滚动到底部
const scrollToBottom = async () => {
    await nextTick()
    if (chatContainer.value) {
        chatContainer.value.scrollTop = chatContainer.value.scrollHeight
    }
}

// 监听对话变化，自动滚动
watch(conversation, () => {
    scrollToBottom()
}, { deep: true })

const send = async () => {
    if (question.value.trim() === "") {
        return
    }
    
    conversation.value.push({
        role: "user",
        content: question.value
    })

    const msg = {
        role: "user",
        content: question.value
    }
    
    question.value = "" // 清空输入框
    
    try {
        const res = await axios.post('http://localhost:3000/deepseek/chat', msg)
        // console.log(res);
        
        conversation.value.push({
            role: "assistant",
            content: res.content
        })
    } catch (error) {
        console.error('发送消息失败:', error)
    }
}
</script>